<template>
  <view class="doteam-box">
    <view class="doteam-head" @click="readTeam">
      <view class="img-box">
        <image class="doteam-img" :src="teamList[ind].imgUrl"/>
      </view>

      <view class="doteam-desc">
        <text class="doteam-title">
          {{ind+1}}.
          {{ teamList[ind].txt }}
        </text>
      </view>
    </view>

    <view style="display: flex">
      <button class="doteam-btn" @click="ind && ind--">
        上一题
      </button>
      <button class="doteam-btn" @click="(ind < teamList.length - 1) && ind++">
        下一题
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";

const ind = ref(0);
const TXT_TYPE = 1;
const IMG_TYPE = 0;
const teamList = ref([
  {
    "imgUrl": "https://bkimg.cdn.bcebos.com/pic/eaf81a4c510fd9f92a8327ff2f2dd42a2934a494",
    "txt": "这是什么颜色？",
    "type": "TXT_TYPE",
    "answer": "红色"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3055710782,1150939411&fm=253&fmt=auto&app=120&f=JPEG?w=430&h=299",
    "txt": "这是什么水果？",
    "type": "IMG_TYPE",
    "answer": "苹果"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3033654038,3010833229&fm=253&fmt=auto&app=138&f=JPEG?w=527&h=500",
    "txt": "这是什么形状？",
    "type": "TXT_TYPE",
    "answer": "圆形"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=464762498,2193164520&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=787",
    "txt": "这是什么动物？",
    "type": "IMG_TYPE",
    "answer": "猫"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3958984912,1183025142&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    "txt": "这是什么动物？",
    "type": "TXT_TYPE",
    "answer": "狗"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=2210110284,3727567966&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888",
    "txt": "这是什么动物？",
    "type": "IMG_TYPE",
    "answer": "鸟"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3765416758,1388398197&fm=253&fmt=auto&app=120&f=JPEG?w=1047&h=800",
    "txt": "这是什么水果？",
    "type": "TXT_TYPE",
    "answer": "香蕉"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=2419732712,4068039463&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
    "txt": "这是什么水果？",
    "type": "IMG_TYPE",
    "answer": "橙子"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=3106694974,1589979430&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
    "txt": "这是什么蔬菜？",
    "type": "TXT_TYPE",
    "answer": "胡萝卜"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=1432712637,307908414&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1078",
    "txt": "这是什么蔬菜？",
    "type": "IMG_TYPE",
    "answer": "西红柿"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=342553274,508815794&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800",
    "txt": "这是什么交通工具？",
    "type": "TXT_TYPE",
    "answer": "自行车"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=176263258,4211624321&fm=253&fmt=auto&app=120&f=JPEG?w=887&h=500",
    "txt": "这是什么交通工具？",
    "type": "IMG_TYPE",
    "answer": "汽车"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=877972888,1717405482&fm=253&fmt=auto&app=138&f=JPEG?w=503&h=500",
    "txt": "这是什么数字？",
    "type": "TXT_TYPE",
    "answer": "5"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=1018510800,831246332&fm=253&fmt=auto&app=138&f=PNG?w=315&h=315",
    "txt": "这是什么数字？",
    "type": "IMG_TYPE",
    "answer": "数字8"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=3492249184,1238197072&fm=253&fmt=auto&app=120&f=JPEG?w=608&h=412",
    "txt": "这是什么季节？",
    "type": "TXT_TYPE",
    "answer": "春天"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=1520352064,223138236&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
    "txt": "这是什么季节？",
    "type": "IMG_TYPE",
    "answer": "夏天"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3117441116,2324405608&fm=253&fmt=auto&app=120&f=JPEG?w=608&h=456",
    "txt": "这是什么天气？",
    "type": "TXT_TYPE",
    "answer": "晴天"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3778936344,185946674&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
    "txt": "这是什么天气？",
    "type": "IMG_TYPE",
    "answer": "雨天"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=3784332218,2298431047&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=752",
    "txt": "这是什么节日？",
    "type": "TXT_TYPE",
    "answer": "春节"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=2209035432,966690917&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
    "txt": "这是什么节日？",
    "type": "IMG_TYPE",
    "answer": "中秋节"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=1008272932,3928549374&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=332",
    "txt": "这是什么运动？",
    "type": "TXT_TYPE",
    "answer": "足球"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=3319526991,1573455313&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=332",
    "txt": "这是什么？",
    "type": "IMG_TYPE",
    "answer": "篮球"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3993507577,1184532522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
    "txt": "这是什么乐器？",
    "type": "TXT_TYPE",
    "answer": "钢琴"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=1034258388,1561884846&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
    "txt": "这是什么？",
    "type": "IMG_TYPE",
    "answer": "吉他"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=2926032085,66743608&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=332",
    "txt": "这是什么玩具？",
    "type": "TXT_TYPE",
    "answer": "熊"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=2774536414,4091444538&fm=253&fmt=auto&app=120&f=JPEG?w=250&h=250",
    "txt": "这是什么玩具？",
    "type": "IMG_TYPE",
    "answer": "积木"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=3714372049,3204826724&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=376",
    "txt": "这是什么动物？",
    "type": "TXT_TYPE",
    "answer": "大象"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=3120182865,4177033450&fm=253&fmt=auto&app=138&f=JPEG?w=315&h=500",
    "txt": "这是什么动物？",
    "type": "IMG_TYPE",
    "answer": "长颈鹿"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=700550058,1574447440&fm=253&fmt=auto&app=138&f=JPEG?w=269&h=500",
    "txt": "这是什么颜色？",
    "type": "TXT_TYPE",
    "answer": "黄色"
  },
  {
    "imgUrl": "",
    "txt": "这是什么花？",
    "type": "IMG_TYPE",
    "answer": "向日葵"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=218743188,44872242&fm=253&fmt=auto&app=138&f=PNG?w=499&h=281",
    "txt": "这是什么形状？",
    "type": "TXT_TYPE",
    "answer": "三角形"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=2425139950,3691803119&fm=253&fmt=auto&app=138&f=JPEG?w=617&h=411",
    "txt": "这是什么？",
    "type": "IMG_TYPE",
    "answer": "金字塔"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3190419696,97912257&fm=253&fmt=auto&app=138&f=JPEG?w=608&h=355",
    "txt": "这是什么动物？",
    "type": "TXT_TYPE",
    "answer": "狮子"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3818069677,3462240506&fm=253&fmt=auto&app=120&f=JPEG?w=839&h=500",
    "txt": "这是什么动物？",
    "type": "IMG_TYPE",
    "answer": "老虎"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=1726036779,942341807&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1423",
    "txt": "这是什么水果？",
    "type": "TXT_TYPE",
    "answer": "葡萄"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=301946823,2777342152&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
    "txt": "这是什么水果？",
    "type": "IMG_TYPE",
    "answer": "西瓜"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=2742876101,1032836681&fm=253&fmt=auto&app=138&f=JPEG?w=1250&h=500",
    "txt": "这是什么交通工具？",
    "type": "TXT_TYPE",
    "answer": "火车"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=3782022641,1988672439&fm=253&fmt=auto&app=138&f=JPEG?w=1536&h=800",
    "txt": "这是什么交通工具？",
    "type": "IMG_TYPE",
    "answer": "飞机"
  },
  {
    "imgUrl": "https://img2.baidu.com/it/u=2006697986,3800114832&fm=253&fmt=auto?w=134&h=117",
    "txt": "这是什么数字？",
    "type": "TXT_TYPE",
    "answer": "10"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=3506511312,486625831&fm=253&fmt=auto&app=138&f=JPEG?w=439&h=300",
    "txt": "这是什么数字？",
    "type": "IMG_TYPE",
    "answer": "数字20"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=953943894,219430751&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889",
    "txt": "这是什么季节？",
    "type": "TXT_TYPE",
    "answer": "秋天"
  },
  {
    "imgUrl": "https://img1.baidu.com/it/u=3170304288,1204080297&fm=253&fmt=auto&app=120&f=JPEG?w=606&h=380",
    "txt": "这是什么季节？",
    "type": "IMG_TYPE",
    "answer": "冬天"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3028058670,3429062169&fm=253&fmt=auto&app=138&f=JPEG?w=467&h=350",
    "txt": "这是什么天气？",
    "type": "TXT_TYPE",
    "answer": "阴天"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=1044772391,2125426076&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422",
    "txt": "这是什么？",
    "type": "IMG_TYPE",
    "answer": "雪"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=3871326984,654883754&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889",
    "txt": "这是什么节日？",
    "type": "TXT_TYPE",
    "answer": "国庆节"
  },
  {
    "imgUrl": "https://img0.baidu.com/it/u=2669759175,1010992975&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
    "txt": "这是什么节日？",
    "type": "IMG_TYPE",
    "answer": "圣诞节"
  },]);
// 读题目
const readTeam = () => {
  const txt = teamList.value[ind].txt;
  // 检查是否安装了语音合成插件
  if (!plus.speech) {
    uni.showToast({
      title: '语音合成插件未安装',
      icon: 'none',
    });
    return;
  }
  // 朗读输入的文字
  plus.speech.speak(txt, (res) => {
    if (res.code === 0) {
      uni.showToast({
        title: '朗读成功',
        icon: 'success',
      });
    } else {
      uni.showToast({
        title: '朗读失败',
        icon: 'none',
      });
    }
  });
}
</script>


<style scoped>
.doteam-box {

}

.img-box {
  width: 95vw; /* 容器宽度为视口宽度的100% */
  height: 65vh; /* 容器高度为视口高度的100% */
  overflow: hidden; /* 防止图片超出容器范围 */
  position: relative;
  margin: 0 auto;
}

.doteam-img {
  position: absolute; /* 绝对定位，相对于容器 */
  left: 0; /* 左边距为0 */
  top: 0; /* 顶部为0 */
  width: 100%; /* 图片宽度为容器宽度的100% */
  height: 100%;
}
.doteam-title {
  font-size: 30px;
  text-align: center;
  font-weight: bolder;
}
.doteam-btn {
  font-size: 30px;
  font-weight: bolder;
  background-color: lightgrey;
}

.doteam-desc {
  display: flex;
  justify-content: center;
  line-height: 90px;
}
</style>